<template>
	<view class="store-details-page">
		<!-- 可滚动内容区域 -->
		<scroll-view class="scroll-container" scroll-y="true">

			<!-- 门店基本信息 -->
			<view class="store-info-card">
				<!-- 门店横幅图片 -->
				<view class="banner-section" v-if="storeDetail.bannerImage">
					<image :src="storeDetail.bannerImage" class="banner-image" mode="aspectFill"></image>
				</view>
				<view class="store-header">
					<text class="store-name">{{ storeDetail.name || '加载中...' }}</text>
					<view class="store-rating">
						<view class="stars">
							<text v-for="(star, index) in 5" :key="index" class="star"
								:class="index < storeDetail.rating ? 'filled' : 'outline'">★</text>
						</view>
						<text class="rating-text">{{ storeDetail.rating }}分</text>
						<text class="sales-text">销量: {{ storeDetail.sales }}</text>
					</view>
				</view>

				<view class="store-details">
					<view class="detail-item">
						<text class="detail-label">营业时间:</text>
						<text class="detail-text">{{ storeDetail.businessHours || '暂无信息' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">位置:</text>
						<text class="detail-text">{{ storeDetail.address || '暂无信息' }}</text>
						<image src="/static/images/wgh/plane.png" class="navigate-icon" @click="navigateToStore">
						</image>
					</view>
				</view>


			</view>

			<!-- 服务项目 -->
			<view class="services-section">
				<text class="section-title">服务项目</text>

				<!-- 服务类型标签栏 -->
				<view class="service-tabs">
					<view class="tab-item" v-for="(tab, index) in serviceTabs" :key="index"
						:class="{ 'active': currentServiceTab === index }" @click="switchServiceTab(index)">
						<text class="tab-text">{{ tab.name }}</text>
					</view>
				</view>

				<!-- 服务项目列表 -->
				<view class="service-list">
					<view class="service-item" v-for="(service, index) in currentServices" :key="index"
						:class="{ 'selected': selectedService && selectedService.name === service.name }"
						@click="selectService(service, index)">
						<view class="service-icon">
							<image :src="service.icon" class="service-img" mode="aspectFill"></image>
						</view>
						<view class="service-content">
							<text class="service-name">{{ service.name }}</text>
							<text class="service-desc">{{ service.description }}</text>
							<view class="service-price">
								<text class="current-price">¥{{ service.price }}</text>
								<text class="original-price">¥{{ service.originalPrice }}</text>
							</view>
						</view>
						<view class="purchase-btn" @click.stop="purchaseService(service, index)"
							v-if="serviceTabs[currentServiceTab].type !== 'repair'">
							<text class="purchase-text">抢购</text>
						</view>
						<view class="appointment-btn" @click.stop="purchaseService(service, index)"
							v-if="serviceTabs[currentServiceTab].type === 'repair'">
							<text class="appointment-text">预约</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务评价 -->
			<view class="reviews-section">
				<text class="section-title">服务评价</text>
				<view class="review-list">
					<view class="review-item" v-for="(review, index) in reviews" :key="index">
						<view class="review-header">
							<image :src="review.avatar" class="review-avatar" mode="aspectFill"></image>
							<view class="review-info">
								<text class="reviewer-name">{{ review.name }}</text>
								<view class="review-rating">
									<text v-for="(star, starIndex) in 5" :key="starIndex" class="star"
										:class="starIndex < review.rating ? 'filled' : 'outline'">★</text>
								</view>
							</view>
							<text class="review-date">{{ review.date }}</text>
						</view>
						<text class="review-content">{{ review.content }}</text>
					</view>
				</view>
			</view>

			<!-- 底部操作栏 -->
			<view class="bottom-actions">
				<button class="confirm-btn" @click="confirmSelectedServices">
					<text class="btn-text">确认已选服务</text>
				</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 导入封装的请求工具
	import { get } from '@/utils/request.js';
	
	export default {
		data() {
			return {
				shopId: null,
				typeId: null,
				storeDetail: {},
				selectedService: null,
				currentServiceTab: 0, // 当前选中的服务类型标签
				serviceTabs: [{
						name: '维修',
						type: 'repair'
					},
					{
						name: '保养',
						type: 'maintenance'
					},
					{
						name: '洗车',
						type: 'wash'
					},
					{
						name: '其他',
						type: 'other'
					}
				],
				services: {
					wash: [],
					repair: [],
					maintenance: [],
					other: []
				},
				reviews: [{
						name: '黄**',
						avatar: '/static/images/7.png',
						rating: 4,
						date: '2022-12-31',
						content: '服务很好，师傅很专业，价格合理，推荐！'
					},
					{
						name: '李**',
						avatar: '/static/images/6.png',
						rating: 5,
						date: '2022-12-28',
						content: '环境干净，服务态度很好，下次还会再来。'
					}
				]
			}
		},
		computed: {
			// 当前显示的服务项目
			currentServices() {
				const currentTabType = this.serviceTabs[this.currentServiceTab].type;
				return this.services[currentTabType] || [];
			},
		},
		onLoad(options) {
			console.log('接收到的参数:', options);
			this.shopId = options.shopId || null;
			this.typeId = options.typeId || null;
			this.setDefaultServiceTab();
			this.getStoreDetailById();
		},
		methods: {
			// 根据typeId设置默认服务标签
			setDefaultServiceTab() {
				if (this.typeId !== null && this.typeId !== undefined) {
					// typeId 1,2,3,4 对应标签索引 0,1,2,3
					const tabIndex = parseInt(this.typeId) - 1;
					if (tabIndex >= 0 && tabIndex < this.serviceTabs.length) {
						this.currentServiceTab = tabIndex;
						console.log('默认选中服务标签:', this.serviceTabs[tabIndex].name);
					}
				}
			},

			// 根据服务类型和门店ID获取服务详情
			getStoreDetailById() {
				get(`/merchant/serviceDetails/shop/${this.shopId}`)
					.then(res => {
						if (res.code === 200) {
							console.log('获取服务详情成功:', res);
							const serviceData = res.data;
							if (serviceData && serviceData.length > 0) {
								// 映射门店基本信息（使用第一条数据）
								const firstService = serviceData[0];
								this.storeDetail = {
									id: firstService.id,
									name: firstService.shopName,
									address: firstService.address,
									bannerImage: firstService.photo,
									businessHours: this.formatBusinessHours(firstService.startTime,
										firstService.endTime),
									rating: firstService.rate
								};

								// 映射服务项目数据
								this.updateCurrentServices(serviceData);
								console.log('门店信息和服务已映射');
							} else {
								console.log('该门店暂无此类型的服务');
							}
						}
					})
					.catch(error => {
						console.error('获取门店详情失败:', error);
					});
			},

			// 更新当前服务项目数据
			updateCurrentServices(serviceData) {
				// 清空所有服务类型
				Object.keys(this.services).forEach(key => this.services[key] = []);

				// 按服务类型分组
				serviceData.forEach(service => {
					const matchingTab = this.serviceTabs.find(tab => tab.name === service.typeName);
					if (matchingTab) {
						const serviceType = matchingTab.type;
						if (!this.services[serviceType]) this.services[serviceType] = [];

						this.services[serviceType].push({
							name: service.name,
							description: service.introduction,
							price: service.presentPrice,
							originalPrice: service.originalPrice,
							icon: service.img
						});
					}
				});
			},

			// 选择服务
			selectService(service, index) {
				// 如果点击的是当前已选中的服务，则取消选择
				if (this.selectedService && this.selectedService.name === service.name) {
					this.selectedService = null;
				} else {
					// 否则选择新的服务
					this.selectedService = {
						...service,
						localIndex: index,
						serviceType: this.serviceTabs[this.currentServiceTab].type
					};
				}
			},

			formatBusinessHours(startTime, endTime) {
				if (!startTime || !endTime) return '营业时间待更新';

				const extractTime = (timeStr) => {
					const time = timeStr.includes('T') ? timeStr.split('T')[1].split('.')[0] : timeStr;
					return time.substring(0, 5); // 只取前5位 "HH:MM"
				};

				return `周一至周日 ${extractTime(startTime)}-${extractTime(endTime)}`;
			},

			// 抢购/预约服务
			purchaseService(service, localIndex) {
				this.goToOrderConfirm(service, localIndex);
			},

			// 确认已选服务
			confirmSelectedServices() {
				if (!this.selectedService) {
					uni.showToast({
						title: '请先选择服务项目',
						icon: 'none'
					});
					return;
				}
				this.goToOrderConfirm(this.selectedService);
			},

			// 跳转到订单确认页面
			goToOrderConfirm(service, localIndex) {
				uni.setStorageSync('selectedStoreDetail', this.storeDetail);

				const selectedService = localIndex !== undefined ? {
					...service,
					localIndex,
					serviceType: this.serviceTabs[this.currentServiceTab].type
				} : service;

				const servicesData = {
					selectedServices: [selectedService],
					services: [selectedService]
				};
				uni.setStorageSync('selectedServicesData', servicesData);

				uni.navigateTo({
					url: '/pages/carMaintenance/orderConfirm/orderConfirm'
				});
			},
			navigateToStore() {
				uni.showToast({
					title: '正在为您导航',
					icon: 'none'
				});
			},
			// 切换服务类型标签
			switchServiceTab(index) {
				this.currentServiceTab = index;
			},
		}
	}
</script>

<style scoped>
	.store-details-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #0A64E7 350rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
		width: 100%;
		box-sizing: border-box;
	}

	/* 滚动容器样式 */
	.scroll-container {
		flex: 1;
		height: 100vh;
		width: 100%;
		padding: 20rpx;
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}


	/* 横幅区域 */
	.banner-section {
		position: relative;
		height: 350rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	/* 门店信息卡片 */
	.store-info-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.store-header {
		margin-top: 20rpx;
	}

	.store-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
		display: block;
	}

	.store-rating {
		display: flex;
		align-items: center;
	}

	.stars {
		display: flex;
		margin-right: 16rpx;
	}

	.star {
		font-size: 28rpx;
		margin-right: 4rpx;
	}

	.star.filled {
		color: #ffd700;
	}

	.star.outline {
		color: #ddd;
	}

	.rating-text {
		font-size: 26rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.sales-text {
		font-size: 26rpx;
		color: #333;
	}

	.store-details {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		margin-top: 30rpx;
	}

	.detail-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 40rpx;
		width: 120rpx;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.detail-text {
		font-size: 28rpx;
		color: #666;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}

	.navigate-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 130rpx;
	}

	/* 服务项目 */
	.services-section {
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	/* 服务类型标签栏 */
	.service-tabs {
		display: flex;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		padding: 8rpx;
		margin-bottom: 20rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 16rpx 8rpx;
		border-radius: 8rpx;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		background-color: #2b79f5;
		box-shadow: 0 2rpx 8rpx rgba(43, 121, 245, 0.3);
	}

	.tab-text {
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.tab-item.active .tab-text {
		color: #fff;
		font-weight: 600;
	}

	.service-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.service-item {
		display: flex;
		align-items: flex-start;
		padding: 20rpx;
		border-radius: 12rpx;
		border: 2rpx solid #f0f0f0;
		transition: all 0.3s ease;
		position: relative;
	}

	.service-item.selected {
		border-color: #2b79f5;
		background-color: #f8f9ff;
	}

	.service-icon {
		margin-left: 15rpx;
		margin-right: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #f8f9fa;
	}

	.service-img {
		width: 100%;
		height: 100%;
	}


	.purchase-btn,
	.appointment-btn {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		border: none;
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.purchase-btn {
		background: linear-gradient(135deg, #ff6b35, #f7931e);
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
	}

	.appointment-btn {
		background: linear-gradient(135deg, #4080FF, #69B1FF);
		box-shadow: 0 4rpx 12rpx rgba(64, 128, 255, 0.3);
	}

	.purchase-text,
	.appointment-text {
		color: #fff;
		font-size: 24rpx;
		font-weight: 500;
	}

	.service-content {
		flex: 1;
		padding-right: 100rpx;
		/* 为右侧按钮留出空间 */
	}

	.service-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.service-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
		margin-bottom: 12rpx;
		display: block;
	}

	.service-price {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.current-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #f53f3f;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	/* 服务评价 */
	.reviews-section {
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.review-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.review-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.review-item:last-child {
		border-bottom: none;
	}

	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.review-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.review-info {
		flex: 1;
	}

	.reviewer-name {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 4rpx;
		display: block;
	}

	.review-rating {
		display: flex;
	}

	.review-rating .star {
		font-size: 20rpx;
		margin-right: 2rpx;
	}

	.review-date {
		font-size: 22rpx;
		color: #999;
	}

	.review-content {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 底部操作栏 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.confirm-btn {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border: none;
		background-color: #ff6b35;
		color: #fff;
	}

	.btn-text {
		font-size: 28rpx;
		font-weight: 500;
	}
</style>